<template>
  <MyDrawer ref="myRef" title="优惠活动" @submit="submit" @cancel="close" :disabled="false" width="30%">
    <el-form ref="formRef" :model="drawerProps.row" label-width="100" :rules="rules">
      <el-form-item label="模板选择">
        <el-select @change="change" v-model="nowModel">
          <el-option v-for="(p, index) in drawerProps.modelList" :key="index" :label="p.title" :value="p"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="标题" prop="title">
        <el-input v-model="drawerProps.row.title"></el-input>
      </el-form-item>
      <el-form-item label="排序值">
        <el-input-number v-model="drawerProps.row.sort" :min="1" :max="10000"></el-input-number>
      </el-form-item>
      <el-form-item label="活动副词" prop="activitySub">
        <el-input v-model="drawerProps.row.activitySub"></el-input>
      </el-form-item>
      <el-form-item label="副词颜色">
        <el-color-picker v-model="drawerProps.row.activitySubColor"></el-color-picker>
      </el-form-item>

      <el-form-item label="活动小图标" prop="cover">
        <ChooseFile v-model:url="drawerProps.row.cover" file-type="image"></ChooseFile>
      </el-form-item>
      <el-form-item label="活动初始人数">
        <el-input-number :min="0" :max="1000000" v-model="drawerProps.row.initNum"></el-input-number>
      </el-form-item>
      <el-form-item label="是否开启">
        <el-switch
          active-text="是"
          inactive-text="否"
          v-model="drawerProps.row.status"
          :active-value="true"
          :inactive-value="false"
        ></el-switch>
      </el-form-item>
      <el-form-item label="按钮名称" prop="buttonName">
        <el-input v-model="drawerProps.row.buttonName"></el-input>
      </el-form-item>
      <el-form-item label="按钮颜色">
        <el-color-picker v-model="drawerProps.row.buttonColor"></el-color-picker>
      </el-form-item>
      <el-form-item label="按钮字体颜色">
        <el-color-picker v-model="drawerProps.row.textColor"></el-color-picker>
      </el-form-item>
      <el-form-item label="背景颜色">
        <el-color-picker v-model="drawerProps.row.backColor"></el-color-picker>
      </el-form-item>
      <el-form-item label="边框颜色">
        <el-color-picker v-model="drawerProps.row.borderColor"></el-color-picker>
      </el-form-item>
      <el-form-item label="弹框图片" prop="image">
        <ChooseFile v-model:url="drawerProps.row.image" file-type="image"></ChooseFile>
      </el-form-item>
      <el-form-item label="弹框内容" prop="cont">
        <el-input type="textarea" maxlength="30" :autosize="false" v-model="drawerProps.row.cont" resize="none"></el-input>
      </el-form-item>
      <el-form-item label="成功按钮" prop="success_button">
        <el-input v-model="drawerProps.row.success_button"></el-input>
      </el-form-item>
      <el-form-item label="预览">
        <div
          class="flex flex-row px-15px py-15px rounded-[8px]"
          :style="{ backgroundColor: drawerProps.row.backColor, border: `1px solid ${drawerProps.row.borderColor}` }"
        >
          <div class="flex flex-col justify-center">
            <el-image :src="url(userInfo.prefix, drawerProps.row.cover)" class="w-32px" style="aspect-ratio: 1/1"></el-image>
          </div>
          <div class="flex flex-col justify-center">
            <span style="line-height: 16px" class="text-14px px-10px whitespace-nowrap">{{ drawerProps.row.title }}</span>
            <span :style="{ 'line-height': '16px', color: drawerProps.row.activitySubColor }" class="text-12px px-10px mt-3px"
              >{{ drawerProps.row.initNum }}人已{{ drawerProps.row.activitySub }}</span
            >
          </div>
          <div class="flex flex-col justify-center">
            <span
              :style="{
                backgroundColor: drawerProps.row.buttonColor,
                color: drawerProps.row.textColor,
                boxShadow: '5px 3px 10px rgba(0,0,0,.3)'
              }"
              class="px-10px box-border whitespace-nowrap cursor-pointer rounded-[30px]"
              >{{ drawerProps.row.buttonName }}</span
            >
          </div>
        </div>
      </el-form-item>
      <el-form-item label="弹框">
        <div class="w-1/1 rounded-[15px] overflow-hidden">
          <div class="w-1/1">
            <el-image class="w-310px" style="aspect-ratio: 2/1" :src="url(userInfo.prefix, drawerProps.row.image)"></el-image>
          </div>
          <div class="p-15px box-border">
            <p class="text-18px font-semibold">{{ drawerProps.row.title }}</p>
            <div style="line-height: 16px" class="mt-10px">
              <span style="line-height: 16px">{{ drawerProps.row.cont }}</span>
            </div>
          </div>
        </div>
      </el-form-item>
    </el-form>
  </MyDrawer>
</template>

<script setup lang="ts">
import { ref } from "vue";
import MyDrawer from "@/components/MyDrawer/index.vue";
import { ElMessage, FormInstance, FormRules } from "element-plus";
import { useRoute } from "vue-router";
import { useUserStore } from "@/stores/modules/user";
import { url } from "@/utils/index";
import ChooseFile from "@/components/ChooseFile/index.vue";

const { userInfo } = useUserStore();

const route = useRoute();

const myRef = ref<InstanceType<typeof MyDrawer> | null>();

interface DrawerProps {
  row: any;
  api?: (params: any) => Promise<any>;
  getTable?: () => Promise<any>;
  modelList?: any;
}

const initData: any = {
  title: "",
  sort: 1,
  cont: "",
  activitySub: "报名",
  cover: "",
  image: "",
  initNum: 0,
  status: true,
  buttonName: "",
  buttonColor: "#00A0EA",
  textColor: "#fff",
  activitySubColor: "#00A0EA",
  backColor: "#E4EBFC",
  borderColor: "#BAD4FF",
  louPanId: 0,
  success_button: ""
};

const rules: FormRules = {
  title: [
    { required: true, message: "活动名称不可为空", trigger: "blur" },
    { min: 1, max: 10, trigger: "blur", message: "字数1-10个字之间" }
  ],
  activitySub: [
    { required: true, message: "报名副词", trigger: "blur" },
    { max: 3, min: 1, message: "字数在1-3个字之间", trigger: "blur" }
  ],
  cover: [{ required: true, message: "小图标不可为空", trigger: "blur" }],
  image: [{ required: true, message: "弹框图不可为空", trigger: "blur" }],
  buttonName: [{ required: true, message: "按钮名称", trigger: "blur" }],
  cont: [{ max: 30, min: 10, message: "字数必须为10-30个字", trigger: "blur" }],
  success_button: [
    { required: true, message: "报名副词", trigger: "blur" },
    { max: 6, min: 1, message: "字数必须为1-6个字", trigger: "blur" }
  ]
};

const drawerProps = ref<DrawerProps>({
  row: JSON.parse(JSON.stringify(initData))
});

const acceptParams = (params: any) => {
  drawerProps.value = params;
  if (!params.row) {
    drawerProps.value.row = JSON.parse(JSON.stringify(initData));
  }
  myRef.value?.acceptParams();
};

const formRef = ref<FormInstance>();

const submit = () => {
  if (!formRef.value) return;
  formRef.value.validate(async valid => {
    if (valid) {
      drawerProps.value.row.louPanId = parseInt(route.query.id as string);
      await drawerProps.value.api!(drawerProps.value.row);
      ElMessage.success("成功");
      await drawerProps.value.getTable!();
      myRef.value?.close();
    }
  });
};

const nowModel = ref();

const change = (val: any) => {
  const id = drawerProps.value.row.id;
  drawerProps.value.row = val;
  drawerProps.value.row.id = id;
};

const close = () => {};

defineExpose({
  acceptParams
});
</script>

<style></style>
